<template>
<div>
    <div id="toparea">
        <SearchTop :title ='title'></SearchTop>        
    </div>
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    />

</div>
</template>

<script>
import Vue from 'vue';
import { Toast } from 'vant';
import { AddressEdit } from 'vant';
import areaList from '../../utils/arealist'
import SearchTop from '../../components/search/SearchTop'

Vue.use(AddressEdit);

export default {
    data() {
        return {
            title:'添加地址',
            areaList,
            searchResult: [],
        };
    },
    components:{
        SearchTop
    },
    methods: {
    onSave( content ) {
      Toast('保存成功');
      console.log(content)
      let obj = {}
      obj.name = content.name
      obj.addressDetail = content.addressDetail
      obj.county =content.county
      obj.tel = content.tel
      console.log( obj )
      this.$store.dispatch('addlist/addAddress', obj )
      this.$router.push('/addresslist')

    },
    onDelete() {
      this.$router.go(-1)
    },
    onChangeDetail(val) {

        this.searchResult = [];
    },
  },
    mounted () {
    }
}
</script>

<style scoped>

</style>
